<template>
  <div class="card" :class="{ 'card--real': record.predictedResult === 'real', 'card--fake': record.predictedResult === 'fake' }">
    <div class="card__image" :style="{ backgroundColor: record.predictedResult === 'real' ? '#9de1b8' : '#d6eae7' }">
      <img :src="record.imagePath" style="max-width: 300px">
    </div>
    <div class="card__content">
      <template v-if="record.predictedResult === 'real'">
        <span class="title">图片为真</span>
      </template>
      <template v-else>
        <span class="title">图片为假</span>
      </template>
      <p>检测时间: {{record.createTime}}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['record']);
</script>

<style scoped>
.card {
  width: 300px;
  height: 400px;
  color: var(--color);
  background-color: #e2e8e3;
  font-weight: 600;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: left;
  position: relative;
  transition: all .5s ease;
}

.card--real::before {
  content: "真";
}

.card--fake::before {
  content: "假";
}

.card__image {
  width: initial;
  height: 400px;
  transition: all .5s ease;
}

.title {
  font-weight: 800;
  font-size: 1.4em;
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  gap: 10px;
}

.card:hover {
  border-top-left-radius: 35px;
  box-shadow: 5px 5px 0px 0px #06d6a0, 10px 10px 0px 0px #118ab2, 15px 15px 0px 0px #06d6a0, 5px 5px 15px 5px rgba(0,0,0,0);
}

.card:hover .card__image {
  border-top-left-radius: 25px;
}

.card--real::before,
.card--fake::before {
  position: absolute;
  width: 75px;
  height: 75px;
  top: 35%;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #9de1b8;
  color: var(--color);
  font-size: 20px;
  font-weight: 800;
  transition: all .5s ease;
}

.card--fake::before {
  background-color: #de528a;
}

.card:hover::before {
  transform: scale(1.3) rotate(-30deg);
}
</style>
